<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="历史明细" :width="1000">
    <a-tabs v-model:activeKey="activeKey" :style="{ height: '100%' }">
      <a-tab-pane key="1" tab="全部">
        <BasicTable @register="registerAllTable">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'type'">
              <span :style="getType('style', record.type)">{{ getType('text', record.type) }}</span>
            </template>
            <template v-if="column.dataIndex == 'operateType'">
              <span :style="getOperateType('style', record.operateType)">
                {{ getOperateType('text', record.operateType) }}
              </span>
            </template>
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane key="2" tab="入库详情">
        <BasicTable @register="registerInStoreTable">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'type'">
              <span :style="getType('style', record.type)">{{ getType('text', record.type) }}</span>
            </template>
            <template v-if="column.dataIndex == 'operateType'">
              <span :style="getOperateType('style', record.operateType)">
                {{ getOperateType('text', record.operateType) }}
              </span>
            </template>
          </template>
        </BasicTable>
      </a-tab-pane>
      <a-tab-pane key="3" tab="出库详情">
        <BasicTable @register="registerOutStoreTable">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'type'">
              <span :style="getType('style', record.type)">{{ getType('text', record.type) }}</span>
            </template>
            <template v-if="column.dataIndex == 'operateType'">
              <span :style="getOperateType('style', record.operateType)">
                {{ getOperateType('text', record.operateType) }}
              </span>
            </template>
          </template>
        </BasicTable>
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getMaterialHistoryPageList } from '/@/api/erp/material/list';
  const allColumns: BasicColumn[] = [
    {
      title: '库存类别',
      dataIndex: 'type',
    },
    {
      title: '产品名称',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '操作类型',
      dataIndex: 'operateType',
    },
    {
      title: '操作时间',
      dataIndex: 'createDate',
    },
    {
      title: '数量',
      dataIndex: 'count',
      width: 100,
    },
    {
      title: '库存结余',
      dataIndex: 'localInventory',
      width: 100,
    },
  ];
  const columns: BasicColumn[] = [
    {
      title: '库存类别',
      dataIndex: 'type',
    },
    {
      title: '产品名称',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '操作类型',
      dataIndex: 'operateType',
    },
    {
      title: '操作时间',
      dataIndex: 'createDate',
    },
    {
      title: '数量',
      dataIndex: 'count',
      width: 100,
    },
  ];
  const activeKey = ref('1');
  const rowId = ref('');
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ destroyOnClose: true, fixedHeight: true });
    rowId.value = data.id;
    activeKey.value = '1';
  });

  const [registerAllTable] = useTable({
    title: '库存数据列表',
    api: getMaterialHistoryPageList,
    beforeFetch: (paramas) => {
      return { id: rowId.value, ...paramas };
    },
    rowKey: 'id',
    columns: allColumns,
  });
  const [registerInStoreTable] = useTable({
    api: getMaterialHistoryPageList,
    beforeFetch: (paramas) => {
      return { id: rowId.value, type: 1, ...paramas };
    },
    rowKey: 'id',
    columns,
  });
  const [registerOutStoreTable] = useTable({
    api: getMaterialHistoryPageList,
    beforeFetch: (paramas) => {
      return { id: rowId.value, type: 0, ...paramas };
    },
    rowKey: 'id',
    columns,
  });

  const getType = (type, record) => {
    if (type === 'style') {
      return { color: record === 1 ? '#5e95ff' : '#f59a23' };
    } else {
      return record === 1 ? '入库' : '出库';
    }
  };

  const getOperateType = (type, record) => {
    switch (record) {
      case -1:
        return type === 'style' ? { color: '#f59a23' } : '盘点减少';
      case 0:
        return type === 'style' ? { color: '#ec808d' } : '报废';
      case 1:
        return type === 'style' ? { color: '#5e95ff' } : '盘点增加';
      case 2:
        return type === 'style' ? { color: '#f59a23' } : '订单销售';
      case 3:
        return type === 'style' ? { color: '#5e95ff' } : '库存采购';
      default:
        break;
    }
  };
</script>
<style lang="less" scoped>
  :deep(.ant-tabs-content) {
    height: 100% !important;
  }
</style>
